"use client"

import { useState, useEffect } from 'react'

interface Course {
  lesson_number: string
  course_name: string
  target_char: string
}

interface ExtensionDisplayProps {
  currentCourse?: Course
}

interface ExtensionData {
  meanings: string[]
  words: { word: string; meaning: string }[]
  sentences: { sentence: string; meaning: string }[]
  classics: { source: string; quote: string; translation: string; context: string }[]
}

export function ExtensionDisplay({ currentCourse }: ExtensionDisplayProps) {
  const [selectedTab, setSelectedTab] = useState('meanings')
  const [extensionData, setExtensionData] = useState<ExtensionData | null>(null)

  // 根据当前汉字获取扩展数据
  useEffect(() => {
    if (currentCourse?.target_char) {
      const data = getExtensionData(currentCourse.target_char)
      setExtensionData(data)
    }
  }, [currentCourse])

  // 模拟数据 - 实际应用中可以从API获取
  const getExtensionData = (char: string): ExtensionData => {
    const dataMap: { [key: string]: ExtensionData } = {
      '木': {
        meanings: [
          '树木、植物的总称',
          '木材、木料',
          '木制品、器具',
          '五行之一，代表生长、生机',
          '朴实、纯真的品质',
          '呆板、不灵活（贬义）'
        ],
        words: [
          { word: '木材', meaning: '制作器具、建筑用的木料' },
          { word: '树木', meaning: '木本植物的总称' },
          { word: '木工', meaning: '制作木器的工匠' },
          { word: '木头', meaning: '砍伐下来的树干' },
          { word: '木屋', meaning: '用木材建造的房屋' },
          { word: '木雕', meaning: '在木材上雕刻的艺术品' },
          { word: '木桥', meaning: '用木材建造的桥梁' },
          { word: '木船', meaning: '用木材制造的船只' }
        ],
        sentences: [
          { sentence: '这座木桥已经有百年历史了。', meaning: '说明木桥的悠久历史' },
          { sentence: '爷爷是个手艺精湛的木工。', meaning: '赞美木工的技艺' },
          { sentence: '森林里的树木郁郁葱葱。', meaning: '形容树木茂盛的样子' },
          { sentence: '他用上好的木材制作了这张桌子。', meaning: '说明制作材料的优质' }
        ],
        classics: [
          {
            source: '道德经',
            quote: '上善若水，水善利万物而不争',
            translation: '最高的善像水一样，水善于滋润万物而不与万物相争',
            context: '虽然此句说水，但体现了自然万物（包括草木）的无私品格'
          },
          {
            source: '易经',
            quote: '君子以厚德载物',
            translation: '君子应该像大地一样厚重，能够承载万物',
            context: '大地承载包括草木在内的万物，体现包容之德'
          },
          {
            source: '尚书',
            quote: '树德务滋，除恶务本',
            translation: '培养德行要不断滋养，除去恶习要从根本做起',
            context: '用树木生长比喻德行的培养，需要持续的滋养'
          },
          {
            source: '诗经',
            quote: '关关雎鸠，在河之洲。窈窕淑女，君子好逑',
            translation: '关关鸣叫的雎鸠，栖息在河中的小洲。美丽善良的女子，是君子的好配偶',
            context: '虽然主要写鸟，但河洲上必有草木，体现自然和谐之美'
          }
        ]
      },
      '水': {
        meanings: [
          '无色无味的液体，生命之源',
          '江河湖海等水体',
          '雨水、露水等自然水分',
          '五行之一，代表流动、柔韧',
          '品德高尚，如水般纯净',
          '智慧如水，能适应环境'
        ],
        words: [
          { word: '水源', meaning: '水的来源，泉眼或河流的起点' },
          { word: '流水', meaning: '流动的水' },
          { word: '清水', meaning: '清澈干净的水' },
          { word: '水滴', meaning: '很小的水珠' },
          { word: '水面', meaning: '水的表面' },
          { word: '水深', meaning: '水的深度' },
          { word: '水温', meaning: '水的温度' },
          { word: '水质', meaning: '水的质量和纯净程度' }
        ],
        sentences: [
          { sentence: '清澈的泉水从山间流淌而下。', meaning: '描述泉水的清澈和流动' },
          { sentence: '水是生命的源泉。', meaning: '强调水对生命的重要性' },
          { sentence: '滴水穿石，持之以恒。', meaning: '比喻坚持不懈的力量' },
          { sentence: '上善若水，润物无声。', meaning: '赞美水的品格和作用' }
        ],
        classics: [
          {
            source: '道德经',
            quote: '上善若水，水善利万物而不争',
            translation: '最高的善像水一样，水善于滋润万物而不与万物相争',
            context: '老子用水比喻最高的道德境界'
          },
          {
            source: '论语',
            quote: '智者乐水，仁者乐山',
            translation: '智慧的人喜欢水，仁德的人喜欢山',
            context: '孔子用水山比喻不同品格的人的喜好'
          },
          {
            source: '易经',
            quote: '天一生水，地六成之',
            translation: '天生成水，地使水完备',
            context: '说明水在天地生成中的重要地位'
          },
          {
            source: '庄子',
            quote: '水之积也不厚，则其负大舟也无力',
            translation: '水积聚得不深厚，就没有力量承载大船',
            context: '比喻学问积累的重要性'
          }
        ]
      }
    }

    return dataMap[char] || {
      meanings: ['暂无扩展含义'],
      words: [],
      sentences: [],
      classics: []
    }
  }

  const tabs = [
    { id: 'meanings', label: '扩展含义', icon: '💭' },
    { id: 'words', label: '组词应用', icon: '📝' },
    { id: 'sentences', label: '造句示例', icon: '✍️' },
    { id: 'classics', label: '经典名句', icon: '📚' }
  ]

  if (!extensionData) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-gray-500">加载中...</div>
      </div>
    )
  }

  return (
    <div className="h-full flex flex-col bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
      {/* 标题区域 */}
      <div className="bg-white/80 backdrop-blur-sm rounded-t-2xl p-4 border-b border-purple-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white text-xl font-bold">
              {currentCourse?.target_char || '字'}
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-800">扩展应用</h2>
              <p className="text-sm text-gray-600">深入理解汉字的丰富内涵</p>
            </div>
          </div>
          <div className="text-2xl">🌟</div>
        </div>
      </div>

      {/* Tab导航 */}
      <div className="bg-white/60 backdrop-blur-sm p-2">
        <div className="flex space-x-1">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setSelectedTab(tab.id)}
              className={`
                flex-1 flex items-center justify-center space-x-2 py-2 px-3 rounded-lg transition-all duration-300
                ${selectedTab === tab.id
                  ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
                  : 'bg-white/50 text-gray-700 hover:bg-white/80'
                }
              `}
            >
              <span className="text-sm">{tab.icon}</span>
              <span className="text-xs font-medium">{tab.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 内容区域 */}
      <div className="flex-1 p-4 overflow-y-auto">
        {selectedTab === 'meanings' && (
          <div className="space-y-3">
            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
              <span className="mr-2">💭</span>
              扩展含义
            </h3>
            {extensionData.meanings.map((meaning, index) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-purple-100">
                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">
                    {index + 1}
                  </div>
                  <p className="text-gray-700 leading-relaxed">{meaning}</p>
                </div>
              </div>
            ))}
          </div>
        )}

        {selectedTab === 'words' && (
          <div className="space-y-3">
            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
              <span className="mr-2">📝</span>
              组词应用
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {extensionData.words.map((item, index) => (
                <div key={index} className="bg-white/80 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-blue-100">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="text-lg font-bold text-blue-600">{item.word}</span>
                    <span className="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">词语</span>
                  </div>
                  <p className="text-sm text-gray-600 leading-relaxed">{item.meaning}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        {selectedTab === 'sentences' && (
          <div className="space-y-3">
            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
              <span className="mr-2">✍️</span>
              造句示例
            </h3>
            {extensionData.sentences.map((item, index) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-green-100">
                <div className="mb-3">
                  <div className="flex items-start space-x-2">
                    <span className="text-green-500 text-lg">📝</span>
                    <p className="text-gray-800 font-medium leading-relaxed">{item.sentence}</p>
                  </div>
                </div>
                <div className="pl-6 border-l-2 border-green-200">
                  <p className="text-sm text-gray-600">{item.meaning}</p>
                </div>
              </div>
            ))}
          </div>
        )}

        {selectedTab === 'classics' && (
          <div className="space-y-4">
            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
              <span className="mr-2">📚</span>
              经典名句
            </h3>
            {extensionData.classics.map((item, index) => (
              <div key={index} className="bg-white/90 backdrop-blur-sm rounded-xl p-5 shadow-md border border-amber-100">
                <div className="mb-3">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="text-amber-600 text-lg">📜</span>
                    <span className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium">
                      {item.source}
                    </span>
                  </div>
                  <blockquote className="text-lg text-gray-800 font-medium italic border-l-4 border-amber-300 pl-4 mb-3">
                    "{item.quote}"
                  </blockquote>
                </div>
                <div className="space-y-2 pl-4">
                  <div>
                    <span className="text-xs text-amber-600 font-medium">译文：</span>
                    <p className="text-sm text-gray-700 mt-1">{item.translation}</p>
                  </div>
                  <div>
                    <span className="text-xs text-amber-600 font-medium">释义：</span>
                    <p className="text-sm text-gray-600 mt-1">{item.context}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
} 